<template>
<div>
    <div class="bg"></div>
    <div class="login-content flex-center">
        <div class="forms flex">
            <div>
                <img :src="cdns.user_login_bg" class="login-bg" />
            </div>
            <div class="flex-column flex1">
                <div class="logo">
                    <router-link to="/">
                        <img :src="cdns.logo" class="logo-img" />
                    </router-link>
                </div>
                <div class="flex-column" style="width:100%">
                    <el-form ref="form" :model="form" label-width="20px" class="form">
                        <el-form-item prop="F_Account" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
                            <el-input tabindex="1" v-model="form.F_Account" @keyup.enter.native="login" placeholder="Please input ID number"></el-input>
                            <div class="morn-input">
                                <!-- <input /> -->
                                <input type="password" />
                            </div>
                        </el-form-item>
                        <el-form-item prop="F_Password" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
                            <el-input tabindex="2"  type="password" show-password v-model="form.F_Password" @keyup.enter.native="login" placeholder="Please input Password"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="sava flex-center width-100">
                        <el-button type="primary" @click="login" :loading="loading">Login</el-button>
                        <div class="register flex-between width-100">
                            <div>No Account? <router-link to="/register">Register</router-link>
                            </div>
                            <div>
                                <router-link to="/forgetPassword">Forget Password?</router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
export default {
    inject:['cdns'],
    data() {
        return {
            form: {
                F_Account: "",
                F_Password: ""
            },
            loading: false,
            //登录后，页面跳转到Home，建议直接跳转至User Center
            redirect: this.$route?.query?.redirect || '/user/center'//'/home'
        };
    },
    methods: {
        login() {
            this.$refs.form.validate((valid) => {
                if (!valid) return false;
                this.loading = true;
                this.$store
                    .dispatch("login", this.form)
                    .then(() => {
                        this.loading = false;
                        this.$router.push({ path: this.redirect });
                    })
                    .catch(() => (this.loading = false));
            });
        }
    }
};
</script>
<style scoped lang="scss">
.login-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0064a6;
    background: url("~@/assets/images/home/banner.png") no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(8px);
}
.forms {
    width: 100%;
    height: 602px;
    max-width: 1000px;
    border-radius: 21px;
    padding: 80px;
    border-top: 1px solid #eee;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(0, 89, 156, 0.3);
    .login-bg {
        width: 450px;
        margin-right: 20px;
    }
    .logo-img {
        height: 40px;
        margin-bottom: 70px;
    }
    .form {
        width: 361px;
        margin: 0 auto;
        position: relative;
        ::v-deep .el-form-item__label {
            color: #666666;
            font-size: 14px;
            font-weight: 400;
        }
    }
}
.sava {
    padding: 20px;
    margin-top: 10px;
    flex-direction: column;
    .el-button {
        width: 100%;
        border-radius: 20px;
    }
    .register {
        width: 361px;
        margin: 0 auto;
        margin-top: 30px;
        a {
            color: #337ab7;
        }
    }
}
.morn-input {
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}
</style>